<script setup lang="ts" name="video-visual">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import Bus from "@/utils/eventBus";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { ElTree } from "element-plus";
import {
  getCameraVideoUrl,
  getCameraList_,
  getAllCameraList_,
  getFullDeptTree_,
  getUserVideoUrl,
} from "@/api/server_video";
import mp401 from "@/assets/image/video.mp4";
const isBig = ref(false);
let filterTimer = ref();
let refTree = ref<InstanceType<typeof ElTree>>();

const cameraList = ref<any[]>([]);
const conciseCameraList = ref<any[]>([]);
const conciseCamera = ref<any>({
  page: 1,
  pageSize: 5,
});
const conciseCameraTatal = ref(0);
const fullDeptTree = ref<any[]>([]);
const searchValue = ref();
const defaultProps = reactive({
  children: "children",
  label: "label",
});

const getCameraList = async () => {
  /* 实时监控 */
  let res = await getCameraList_({
    ...conciseCamera,
  });
  conciseCameraList.value = res.list;
  conciseCameraTatal.value = res.total;
};
const getAllCameraList = async () => {
  let res = await getAllCameraList_({});
  if (res.result == "success") cameraList.value = res.list;
  console.log('res.list',cameraList.value);
  
};
/* 获取摄像头信息 */
const videoall = ref(false);
const dialogTableVisible = ref(false);

const video1 = ref<any>(null);
const close = () => {
  video1.value.pause();
};

const cameraClick1 = () => {
  dialogTableVisible.value = true;
  videoall.value = true;
};
/* 获取单个摄像头信息 */
const cameraClick = async (data: any) => {
  let res = await getCameraVideoUrl({
    id: data.camera_id,
  });
  if (res.result == "success") {
    Bus.$emit("openVideo", res);
  }
};

const returnCameraIndex = (data: any) => {
  if (!data) {
    return;
  }
  let coordinate = data.coordinate || "";
  let left = coordinate.split(",")[0];
  let top = coordinate.split(",")[1];
  return { top: `${top}px`, left: `${left}px` };
};
const doubleclick = (event: any) => {
  isBig.value = !isBig.value;
  if (!isBig.value) {
    setMap();
    return;
  }
  let offsetX = event.offsetX;
  let offsetY = event.offsetY;
  let mapBlock: any = document.querySelector(".map-block");
  let mapId: any = document.querySelector(".map-id");
  let mapBlockHeight = mapBlock.clientHeight;
  let mapBlockWidth = mapBlock.clientWidth;
  let mapIdHeight = mapId.clientHeight;
  let mapIdWidth = mapId.clientWidth;
  let left = -event.offsetX + mapBlockWidth / 2;
  let top = -event.offsetY + mapBlockHeight / 2;
  setTimeout(() => {
    if (left > 0) left = 0;
    if (left < mapBlockWidth - mapIdWidth) left = mapBlockWidth - mapIdWidth;
    if (top > 0) top = 0;
    if (top < mapBlockHeight - mapIdHeight) top = mapBlockHeight - mapIdHeight;
    mapId.style.transform = `scale(${1})`;
    mapId.style.left = `${left}px`;
    mapId.style.top = `${top}px`;
  }, 100);
  mapId.oncontextmenu = function () {
    return false;
  };

  mapId.addEventListener("mousedown", function (event: any) {
    event.stopPropagation();
    var code = event.which;
    if (code != 3 || !isBig.value) {
      return;
    }
    let left = parseInt(mapId.style.left);
    let top = parseInt(mapId.style.top);
    let ol = event.clientX;
    let ot = event.clientY;
    document.onmousemove = function (ev) {
      let l = left + ev.clientX - ol;
      let t = top + ev.clientY - ot;
      if (l > 0) l = 0;
      if (l < mapBlockWidth - mapIdWidth) l = mapBlockWidth - mapIdWidth;
      if (t > 0) t = 0;
      if (t < mapBlockHeight - mapIdHeight) t = mapBlockHeight - mapIdHeight;
      mapId.style.left = l + "px";
      mapId.style.top = t + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
    };
  });
};
const setMap = () => {
  let mapBlock: any = document.querySelector(".map-block");
  let mapId: any = document.querySelector(".map-id");
  mapId.style.opacity = 1;
  let mapBlockHeight = mapBlock.clientHeight;
  let mapBlockWidth = mapBlock.clientWidth;
  let mapIdHeight = mapId.clientHeight;
  let mapIdWidth = mapId.clientWidth;
  let zoomVal = mapBlockHeight / mapIdHeight;
  let left = (mapBlockWidth - mapIdWidth) / 2;
  let top = (mapBlockHeight - mapIdHeight) / 2;
  mapId.style.transform = `scale(${zoomVal})`;
  mapId.style.left = `${left}px`;
  mapId.style.top = `${top}px`;
  mapId.oncontextmenu = function () {
    return false;
  };
};

const getFullDeptTree = async () => {
  let res = await getFullDeptTree_({});
  if (res.result == "success") {
    fullDeptTree.value = res.data;
  }
};
const search = async () => {
  clearTimeout(filterTimer.value);
  filterTimer.value = setTimeout(() => {
    refTree.value!.filter(searchValue.value);
  }, 200);
};
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.includes(value);
};
const handleNodeClickUser = async (data: any) => {
  if (data.type == "user") {
    let res = await getUserVideoUrl({
      id: data.id,
    });
    if (res.result == "success") {
      Bus.$emit("openVideo", res);
    }
  }
};
const conciseCurrentChange = async (page: number) => {
  conciseCamera.page = page;
  getCameraList();
};

onMounted(() => {
  getAllCameraList();
  getFullDeptTree();
  getCameraList();
  setTimeout(() => {
    setMap();
  }, 500);
});
</script>

<template>
  <div class="video_visual-page">
    <div class="visual-left">
      <div class="map-block">
        <div class="map-loading">地图加载中...</div>
        <div class="map-id" style="opacity: 0" @dblclick="doubleclick">
          <img class="map-image" src="@/assets/image/home/map.png" alt="" />
          <div
            class="index-point"
            :key="index"
            v-for="(c, index) in cameraList"
            @click="cameraClick1()"
            :style="returnCameraIndex(c)"
          >
            <!--  <img src="../image/gif/index2.gif"> -->
            <div class="camera-hover">
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="c.camera_name"
                placement="left"
              >
                <img src="@/assets/image/home/camera.png" />
                <img class="hover" src="@/assets/image/home/camera1.png" />
              </el-tooltip>
            </div>
          </div>
          <!-- <div
            class="index-point"
            v-for="(c, index) in ngListCarmeta"
            @click="cameraClickNgList(c, index)"
            :style="returnCameraIndex(c.cameraInfo)"
          >
            <img src="../image/gif/index2.gif" />
          </div> -->
        </div>
      </div>
    </div>

    <!-- 视频 -->
    <el-dialog v-model="dialogTableVisible" title="视频播放" @close="close">
      <div style="text-align: center">
        <video ref="video1" controls :src="mp401"></video>
      </div>
    </el-dialog>

    <div class="visual-right">
      <app-box class="search-block" title="">
        <div class="info">
          <div class="search">
            <input
              type="text"
              @input="search"
              v-model="searchValue"
              placeholder="请输入员工姓名"
            />
            <div class="button-green flex-center">搜索</div>
          </div>
          <div class="info-tree">
            <el-tree
              :data="fullDeptTree"
              node-key="id"
              class="user-tree"
              highlight-current
              check-strictly
              ref="refTree"
              :filter-node-method="filterNode"
              :props="defaultProps"
              @node-click="handleNodeClickUser"
            >
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span>
                    <span v-if="data.type == 'dept'">{{ node.label }}</span>
                    <i
                      v-if="data.type == 'user'"
                      style="color: #b0d8f4; padding-left: 5px"
                      >{{ node.label }}</i
                    >
                  </span>
                </span>
              </template>
            </el-tree>
          </div>
        </div>
      </app-box>
      <app-box class="jiankong-block" title="实时监控">
        <div class="concise-cameraList">
          <div class="cameraList-item cameraList-item-title">
            <div class="cameraList-item-cell">序号</div>
            <div class="cameraList-item-cell">相机名称</div>
            <div class="cameraList-item-cell">操作</div>
          </div>
          <div class="cameraList-scroll">
            <div
              class="cameraList-item"
              v-for="(c, index) in conciseCameraList"
              :key="index"
            >
              <div class="cameraList-item-cell">{{ c.camera_id }}</div>
              <div class="cameraList-item-cell">{{ c.camera_name }}</div>
              <div class="cameraList-item-cell">
                <el-button link size="small" @click="cameraClick(c)"
                  >播放</el-button
                >
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          style="text-align: right"
          layout="prev, pager, next"
          :page-size="5"
          @current-change="conciseCurrentChange"
          v-model:currentPage="conciseCamera.page"
          :total="conciseCameraTatal"
        >
        </el-pagination>
      </app-box>
    </div>
  </div>
</template>

<style lang="scss">
.video_visual-page {
  width: 100%;
  height: 100%;
  display: flex;

  .visual-left {
    height: 100%;
    flex: 1;

    .camera-hover .hover {
      display: none;
    }

    .camera-hover:hover .hover {
      display: block;
    }

    .map-block {
      height: 100%;
      // border: 1px solid #318ca2;
      overflow: hidden !important;
      background-color: #111111;
      position: relative;
    }

    .map-id {
      display: inline-block;
      position: absolute;
      cursor: pointer;
    }

    .map-loading {
      color: #fff;
      position: absolute;
      left: 0;
      width: 100%;
      top: 50%;
      text-align: center;
    }

    .map-id .index-point {
      width: 0;
      height: 0;
      position: absolute;
    }

    .map-id .index-point img {
      position: absolute;
      width: 144px;
      left: -144px;
      bottom: 0;
    }
  }

  .visual-right {
    height: 100%;
    width: 300px;
    margin-left: 10px;
  }

  .search-block {
    .info {
      height: 270px;
      padding: 16px;
    }

    .search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 16px;
    }

    input {
      outline: none;
      padding: 0 10px;
      width: 308px;
      height: 32px;
      background: rgba(27, 154, 226, 0.1);
      border-radius: 4px;
      border: 1px solid rgba(0, 180, 255, 0.16);
      color: #fff;
    }

    .search .button-green {
      width: 88px;
      height: 32px;
    }

    .info-tree {
      overflow: auto;
      height: 180px;
      background: rgba(27, 154, 226, 0.1);
    }

    .user-tree {
      background: none;
      color: #fff;

      .el-tree-node__expand-icon.is-leaf {
        opacity: 0;
      }
    }

    .user-tree .el-tree-node.is-current > .el-tree-node__content {
      background-color: #3aa2ad !important;
    }

    .user-tree .el-tree-node:focus > .el-tree-node__content {
      background-color: #3aa2ad !important;
    }

    .user-tree .el-tree-node__content:active {
      background-color: #3aa2ad !important;
    }

    .user-tree .el-tree-node__content:hover {
      background-color: #3aa2ad !important;
    }
  }

  .jiankong-block {
    height: calc(100% - 340px);

    .concise-cameraList {
      height: calc(100% - 70px);
      overflow-y: auto;
    }

    .cameraList-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      padding: 16px;
    }

    .cameraList-item-cell {
      width: 33.3%;
    }

    .cameraList-scroll {
      height: calc(100% - 100px);
    }

    .cameraList-scroll .button-green {
      width: 88px;
      height: 32px;
    }
  }
}
</style>
